<template>
  <div class="singlePage secondary-page-mode">
     <div class="secondary-toolbar">
          <span>时间选择 : </span>&nbsp;
          <div class="layoutBox" style="width:242px">
            <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>&emsp;&emsp;
          <span>监测项目 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value" multiple collapse-tags placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
          <el-button><i class="iconfont icon-sousuo"></i>查询</el-button>
        
     </div>
     <div class="currency-mode-wrap">
           <div class="echartbox" id="echartbox">

           </div>
     </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dateRange: "",
      value:'',
     optionData: [],
    };
  },
  created() {
    this.$store.commit("setShowlefttree", true);
  },
  mounted() {
     this.$nextTick(()=>{
           this.initEchart()
      }) 
  },
  methods: {
    initEchart() {
      var option = {
        title: {
          text: "水温变化趋势分析图",
          x: "center"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["水温","pH"],
          y: "bottom"
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2019/01/27 0时",
            "2019/01/27 4时",
            "2019/01/27 8时",
            "2019/01/27 12时",
            "2019/01/27 14时",
            "2019/01/27 20时",
            "2019/01/27 24时",
            "2019/01/28 0时",
            "2019/01/28 4时",
            "2019/01/28 8时",
            "2019/01/28 12时",
            "2019/01/28 14时",
            "2019/01/28 20时",
            "2019/01/28 24时"
          ]
        },
        yAxis:[{
          type: "value",
          name: "水温(℃)",
        },{
          type: "value",
          name: "pH(无量纲)",
          position: 'left',
          offset: 70,
        }],
        series: [
          {
            name: "水温",
            type: "line",
            data: [11, 11, 15, 13, 12, 13, 10, 12, 11, 16, 13, 8, 10, 12],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
          },
          {
            name: "pH",
            type: "line",
            yAxisIndex: 1,
            data: [2, 7, 5, 3, 1,3, 8,2, 5, 6, 7, 8, 9, 4],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
          }
        ]
      };
      //初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("echartbox"));

      //使用制定的配置项和数据显示图表
      myChart.setOption(option);
      myChart.on('click', function (params) {
          console.log(params)
      });
    },
    selectChange(arr){

    }
  }
};
</script>

<style scope lang="less">
.singlePage {
  .echartbox {
    margin-top: 5px;
    height: 450px;
  }
}
</style>
